<template>
    <div class="good-list-container">
        <!-- 顶部 S -->
        <div class="filter">
            <el-row type="flex" align="middle">
                <el-col :span="2" class="search">搜索 :</el-col>
                <el-col :span="4" class="content">
                    <!-- 模糊查询 -->
                    <el-input v-model="filter.name" clearable @change="filterChange" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="2" class="search">品类:</el-col>
                <el-col :span="4">
                    <CateSelect
                        v-model="filter.cate"
                        @change="filterChange"
                    />
                </el-col>
            </el-row>
            <el-row class="date">
                <el-col :span="4">
                    <div class="block">
                        <span>时间 :</span>
                        <el-date-picker
                        v-model="filter.date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 顶部 E -->
        <!-- 表格 S -->
        <el-table
            :data="tableData"
            style="width: 100%"
            class="table"
            @selection-change="mulSelect"
        >
            <!-- type="selection"实现第一列放置checkbox -->
            <el-table-column
                type="selection"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="商品名称"
                align="center"
            >
            <template slot-scope='scope'>
                <div class="name-img">
                    <img :src='"http://localhost:9999"+scope.row.img' alt="" />
                    <div v-text='scope.row.name'></div>
                </div>
            </template>
            </el-table-column>
            <el-table-column
                prop="hot"
                label="是否热销"
                align="center"
            >
            <template slot-scope="scope">
                <div v-text="scope.row.hot?'是':'不是'"></div>
            </template>
            </el-table-column>
            <el-table-column
                prop="cate"
                label="品类"
                align="center"
            >
                <template slot-scope="scope">
                    <div v-text='cateToCateZh(scope.row.cate)'></div>
                </template>
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格"
                align="center"
                :sortable='true'
                :sort-method='(a,b)=>a.price>=b.price'
            >
                <template slot-scope="scope">
                    <div v-text="scope.row.price+'￥'"></div>
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="上架时间"
                align="center"
                width="200"
            >
                <template slot-scope="scope">
                    <div v-text="timeFormat(scope.row.create_time)"></div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="200"
            >
                <!-- 使用 slot-scope="scope" 可以拿到表格的“行”数据 -->
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleRow(scope.row,'eidt')">编辑
                    </el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleRow(scope.row,'del')">删除
                    </el-button>
                </template>
            </el-table-column>
            <template #append>
                <div class="footer">
                <el-button
                    size="mini"
                    type="danger"
                    @click="delAll">
                    删除选中的行
                </el-button>
                <el-button
                    size="mini">
                    取消选择
                </el-button>
                </div>
            </template>
        </el-table>
        <!-- 表格 E -->
        <!-- 分页器 S -->
        <div class="block paginator">
            <el-pagination
            @size-change="filterChange"
            @current-change="filterChange"
            :page-sizes="[2, 5, 10, 20]"
            :current-page.sync="filter.page"
            :page-size.sync="filter.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 分页器 E -->
    </div>
</template>
<script>
import CateSelect from './components/CateSelect'
import {mapState}from 'vuex'
var moment = require('moment');
export default {
    data(){
        return{
            // 所有查询参数
            filter: {
                name: '',//搜索框数据
                cate: '',//下拉框选择后显示的数据
                date: '',//时间
                page: 1,//当前页面
                size: 2
            },
            tableData:[],//表格数据
            total:1,//总条数
        }
    },
    components:{
        CateSelect
    },
    created(){
        this.init()
    },
    computed:{
        ...mapState('good', ['cateList'])
    },
    methods:{
        //【功能】删除或者修改表格数据
        handleRow(item,type){
            console.log('item',item);
            console.log('type',type);
        },
        // 功能：checkbox多选
        mulSelect(e) {
        console.log('多选', e)
        },
        // 功能：多删
        delAll() {
        console.log('多行')
        },
        //【功能】初始化调接口
        init(){
            this.$api.fetchGoodList(this.filter).then(lists=>{
                var res=lists.data
                var {list,total}=res
                this.tableData=list
                this.total=total
            })
        },
        //【功能】转换时间
        timeFormat(time){
            return moment(time).format('YYYY年MM月DD日');
        },
        //【功能】当filter里面变量改变时，执行
        filterChange() {
            console.log('---name搜索',this.filter)
            // 使用最新的 this.filter 来查询商品列表
            this.init()
        },
        //【功能】品类的中英转换
        cateToCateZh(cate){
            var ele=this.cateList.find(ele=>ele.cate===cate)
            return ele?ele.cate_zh:''
        }
    }

}
</script>
<style lang="scss" scoped>
.good-list-container{
    box-sizing: border-box;
    padding: 10px;
    .search{
        text-align: right;
        margin-right: 5px;
    }
    .content{
        margin-right: 100px;
    }
    .table{
        padding: 10px;
    }
    .filter{
        background:rgba(250, 250, 250, 1)
    }
    .date{
        padding: 20px 68px;
    }
    .footer {
        padding: 15px 0;
        background-color: rgba(250,250,250,1);
    }
    .el-button{
        padding: 12px;
    }
    .paginator{
        text-align: right;
        padding: 15px;
    }
    .name-img {
    &>img {
      display: inline-block;
      width: 50px;
      height: 50px;
    }
  }
}

</style>
